<template>
	<!-- 首页 -->
	<view>
		<u-navbar :is-back="false" :background='background'>
			<view class="slot-wrap">
				<view class="navs">
					<u-icon name="map" size="28" color="#fff"></u-icon>
					<text>{{ addressInfo }}</text>
				</view>
				<view class="titles">有余位</view>
			</view>
		</u-navbar>
		<view class="content">
			<!-- 正文内容 -->
			<view class="banner">
				<image src="../../static/home/banner.png" mode=""></image>
			</view>
			<view class="car-user">
				<button class="avatarButton" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image v-if="avatarUrl == ''" src="../../static/index/ico_tx@2x.png" mode="" class="avatar"></image>
					<image v-else :src="avatarUrl" mode="" class="avatar"></image>
					<text class="loginBtn">授权登录</text>
				</button>

				<u-icon name="arrow-right" size="28" color="#999999"></u-icon>
			</view>
			<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号</button> -->
			<view class="noticeBar">
				<view class="noticeBar-left">
					<image class="ico_srtp" src="../../static/index/ico_srtscp@2x.png" mode=""></image>
					<text>您有一笔未支付订单</text>
				</view>
				<view>
					<text>去支付</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="my-car" @click="myCar">
				<image src="../../static/home/ico_wdcl.png" mode=""></image>
				<text>我的车辆</text>
			</view>
			<view class="car">
				<view class="parking" style="background: #1677FE;" @click="parkingClick">
					<image src="../../static/home/ico_wytc.png" mode=""></image>
					<text>我要停车</text>
				</view>
				<view class="parking" style="background: #FE6000;" @click="stopCar">
					<image src="../../static/home/ico_tcjf.png" mode=""></image>
					<text>停车缴费</text>
				</view>
				<view class="parking" style="background: #05C160;" @click="sharedParking">
					<image src="../../static/home/ico_gxtc.png" mode=""></image>
					<text>共享车位</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			background: {
				background: "#1677FE"
			},
			src: "",
			adList: [],
			avatarUrl: '',
			addressInfo: '定位中...'
		}
	},
	onLoad() {
		// 获取用户的地理位置权限
		let _this = this
		uni.getSetting({
			success(res) {
				console.log(res, 'setting')
				// 判断是否有地理位置权限
				if (!res.authSetting['scope.userLocation']) {
					// 请求获取地理位置权限
					uni.authorize({
						scope: 'scope.userLocation',
						success() {
							// 用户同意获取地理位置权限，可以进行地图定位操作
							// 调用地图定位函数
							_this.getLocation()
						},
						fail() {
							// 用户拒绝获取地理位置权限，提示用户手动授权
							uni.showToast({
								title: '请在设置页中打开地理位置权限',
								icon: 'none'
							})
						}
					})
				} else {
					// 用户已经获取地理位置权限，可以进行地图定位操作
					// 调用地图定位函数
					// _this.getLocation()
				}
			}
		})
	},

	onShow() {
		this.$Api.getAds({}).then(res => {
			console.log(res)
			this.adList = res.data.datalist
		})
		console.log(uni.getStorageSync('user_info').avatarUrl, "uni.getStorageSync('userInfo')");
		if (uni.getStorageSync('user_info')) {
			this.avatarUrl = uni.getStorageSync('user_info').avatarUrl
		}

	},
	methods: {
		// 获取用户地理位置信息
		getLocation() {
			let _this = this;
			uni.getLocation({
				type: 'wgs84',
				success(res) {
					// 操作定位成功，在控制台输出定位信息
					console.log(res)
					uni.setStorageSync('location', res)
					uni.request({
						url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=56YBZ-6G76I-5F4GJ-USLSH-TNSXO-J6BUB&get_poi=1`,
						method: "get",
						success(xhr) {
							if (xhr.data.result) {
								_this.addressInfo = xhr.data.result.address_component.province + xhr.data.result.address_component.city + xhr.data.result.address_component.district
							}
							console.log(xhr.data)

						}
					})
				},
				fail() {
					// 定位失败，提示用户重新尝试
					uni.showToast({
						title: '定位失败，请检查网络或重新尝试',
						icon: 'none'
					})
				}
			})
		},

		onChooseAvatar(e) {
			console.log(e.detail.avatarUrl)
			this.avatarUrl = e.detail.avatarUrl
			uni.setStorageSync('avatar', e.detail.avatarUrl)
		},
		parkingClick(val) {
			console.log(123)
			uni.navigateTo({
				url: "../../pagesA/parkingLot/index"
			})
		},
		stopCar() {
			console.log(123);
			uni.navigateTo({
				url:
					"../../pagesA/parkingPay/index?parkInfo=" +
					encodeURIComponent(JSON.stringify({})),
			});
		},
		sharedParking() {
			uni.navigateTo({
				url: "../../pageB/sharedParking/index"
			})
		},
		myCar() {
			console.log(111)
			uni.navigateTo({
				url: "/pageB/myCar/index"
			})
		}
	}
}
</script>

<style lang="scss">
@import "index.scss";

.avatarButton {
	// border: none!important;
	background: none !important;
	width: 100%;
	display: flex;
	align-items: center;
	padding: 0;
	border: 1px solid #fff !important;

	&::after {
		border: none;
	}
}

.btn-without-shadow {
	box-shadow: none;
}

.loginBtn {
	color: #333333;
	font-size: 32rpx;
}
</style>